<template>
	<view class="bgMinor2 pt-24 plr-24 pt-24" :style="{ minHeight: `${windowHeight}px`, height: 'auto' }">
		<view>
			<view class="pl-24 mb-24 size-34 bold tc">商家权益</view>
			<view class="bgWhite plr-27 ptb-40 radius-16">
				<view class="center">
					<uv-image src="/static/images/maixingren.png" width="102rpx" height="102rpx" mode="scaleToFill"></uv-image>
				</view>
				<view class="size-34 tc mt-40 lineHeight1-1">独享“脉星人”</view>
				<view class="size-22 tc mt-24 lineHeight1-3 color-black3">
					<view class="">认证后仅商家独享专业模特"脉星人"板块并使用图片进行创作</view>
					<view class="">创作图片下载需另向模特本人付费以购买版权</view>
				</view>
			</view>
		</view>

		<view class="mt-30">
			<view class="pl-24 mb-24 size-34 bold tc">认证流程</view>
			<view class="bgWhite plr-24 ptb-24 radius-16">
				<!-- <view class=" tc">
					<view class="numclass">02</view>
				</view> -->
				<view class="">
					<view class="flex flex-top">
						<view class="numclass">01</view>
						<view class="flex-1 ml-30">
							<view class="size-34">提交资料</view>
							<view class="flex">
								<view class="xianclass xianclass2"></view>
								<view class="size-24 color-black2 flex-1 hintClass">上传营业执照，行业资质等材料</view>
							</view>
						</view>
					</view>

					<view class="flex flex-top">
						<view class="numclass">02</view>
						<view class="flex-1 ml-30">
							<view class="size-34">提交资料</view>
							<view class="size-24 color-black2 mt-20">上传营业执照，行业资质等材料</view>
						</view>
					</view>
				</view>
			</view>
		</view>

		<view class="mt-30">
			<view class="width100 height-90"></view>
			<view class="fixedClass plr-24">
				<view class="list_b_btn" @click="onSubmit">开始认证</view>
			</view>
		</view>
	</view>
</template>

<script setup lang="ts">
import { reactive } from 'vue';
import { getWindowHeight } from '@/pages/util/getHeight';
import { onLoad } from '@dcloudio/uni-app';
import { addOpen, loggedIn, addOpenTab } from '@/pages/util/hooks';
import useLoginStore from '@/pinia-store/userInfoStore';
const useLogin = useLoginStore();
// console.log('useLoginuseLogin',useLogin);
const windowHeight = getWindowHeight();
console.log('aaaaaaaaaaaaaa', windowHeight);
/** @name 数据 */
const dataInfo = reactive({
	username: '',
	fileList1: [],
	fileList2: []
});
onLoad((options: any) => {});
/** @name xxx */
function onSubmit() {
	addOpen('/pages/mine/certificationWorkflow')
}

// 删除图片
function deletePic(event) {
	dataInfo[`fileList${event.name}`].splice(event.index, 1);
}

// 新增图片
async function afterRead(event) {
	console.log('新增图片event', event);
	// 当设置 multiple 为 true 时, file 为数组格式，否则为对象格式
	let lists = [].concat(event.file);
	let fileListLen = dataInfo[`fileList${event.name}`].length;
	lists.map((item) => {
		dataInfo[`fileList${event.name}`].push({
			...item,
			status: 'uploading',
			message: '上传中'
		});
	});
	for (let i = 0; i < lists.length; i++) {
		const result = await uploadFilePromise(lists[i].url);
		let item = dataInfo[`fileList${event.name}`][fileListLen];
		dataInfo[`fileList${event.name}`].splice(
			fileListLen,
			1,
			Object.assign(item, {
				status: 'success',
				message: '',
				url: result
			})
		);
		fileListLen++;
	}
}
function uploadFilePromise(url) {
	return new Promise((resolve, reject) => {
		let a = uni.uploadFile({
			url: 'http://192.168.2.21:7001/upload', // 仅为示例，非真实的接口地址
			filePath: url,
			name: 'file',
			formData: {
				user: 'test'
			},
			success: (res) => {
				setTimeout(() => {
					resolve(res.data.data);
				}, 1000);
			}
		});
	});
}
</script>

<style scoped lang="scss">
// :deep(.checklist-box) {
// 	//  模版
// }
.numclass {
	font-size: 28rpx;
	font-weight: 600;
	background: -webkit-linear-gradient(#ffc800, #ff0053); // , 100%,#ff5037 left top,
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}
.xianclass {
	// border-style: solid;
	// border-width: 1px;
	margin: 0 auto;
	width: 1px;
	height: 52rpx;
	border-left: 1px dotted transparent;
	border-image: linear-gradient(to bottom, #ffc800, #ff0053) 1;
	// border-radius: 6rpx;
	// clip-path: inset(0 0 round 6rpx);
}
.xianclass2 {
	margin: 24rpx 0;
	margin-left: -47rpx;
}
.hintClass {
	margin-left: 47rpx;
}


:deep(.uv-upload__button) {
	margin: 0;
}

// 按钮
.list_b_btn {
	background: $ai-primary;
}
</style>
